<template>
  <div class="xterm-container">
    <el-card>
      <template #header>
        <div  class="card-header flex items-center gap-10px">
          <img   class="header-icon w-20px h-20px":src="terminalIcon" alt="" >
          <span class="header-title">终端配置</span>
        </div>  
      </template>
      <el-form 
      :inline="true" 
      class="form-container" 
      :model="terminalForm" 
      :rules="terminalRules" 
      ref="terminalFormRef"
      :hide-required-asterisk="true"
      >
        <el-form-item label="IP地址" prop="address">   
          <el-input 
            v-model="terminalForm.address"
            placeholder="输入服务器IP地址"
          />
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input  
            v-model="terminalForm.port"
            placeholder="输入端口号"
          />
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button 
              type="primary" 
              @click="sendMessageToMain"
              :disabled="isConnected"
              :icon="Position"
            >
              连接服务器
            </el-button>
            <el-button  
              type="danger" 
              :icon="Close"
              v-if="isConnected" 
              @click="disconnectTerminal"
            >
              断开连接
            </el-button>
            <el-button 
              type="info" 
              @click="toggleFullscreen"
            >
              全屏
            </el-button>
          </el-button-group>
        </el-form-item>

      </el-form>
    </el-card>
      <div class="terminal-container">
      <Terminal  
        ref="xtermRef" 
        v-model:isFullscreen="isFullscreen" 
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
declare global {
  interface Window {
    electron: any
  }
}
export default defineComponent({
  name: 'MyXterm',
})
</script>
<script setup  lang="ts">
import { ElMessage } from 'element-plus'
import terminalIcon from '@/assets/aside/terminal.png'
import { Position, Close,} from '@element-plus/icons-vue'
const xtermRef = ref<any>()
const terminalForm = ref<any>({
  address: '192.168.1.118',
  port: 41234,
  type: 'linux'
})
const terminalFormRef = ref<any>(null)
const terminalRules = ref<any>({
  address: [
    { required: true, message: '输入服务器IP地址', trigger: 'blur' }
  ],
  port: [
    { required: true, message: '输入服务器端口号', trigger: 'blur' }
  ]
})
const isConnected = ref<boolean>(false)
const disconnectTerminal = () => {
  isConnected.value = false
  xtermRef.value.disconnectTerminal()
}
const isFullscreen = ref<boolean>(false)
const toggleFullscreen = () => {
  xtermRef.value.toggleFullscreen()
}
function sendMessageToMain() {
  window.electron.sendMessageToMain({
    address: terminalForm.value.address,
    port: terminalForm.value.port,
    commands:'JRLC.UDP.CONNECT'
  })
}
onMounted(() => {
  window.electron.onMessageFromMain((message: any) => {
    if (message.status === 'error') {
      ElMessage.error(message.message)
    }
  })
})
onUnmounted(() => {
  window.electron.removeUdpListener()
})
</script>

<style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/input.scss';
@import '@/styles/form.scss';
.xterm-container {
  padding: 20px;
  min-height: 100vh;
  position: relative;
  // 全屏时移除内边距
  :deep(.fullscreen) {
    padding: 0;
    margin: 0; 
    // 全屏时隐藏 el-card
    .el-card {
      display: none;
    }
  }
  .terminal-container {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    min-height: 100vh;
    // 全屏时移除边距和圆角
    &:has(:deep(.fullscreen)) {
      margin: 0;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
    }
    
    :deep(.xterm) {
      padding: 10px;
    }
  }
}

</style>

